<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员仓库管理</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/管理员仓库管理.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/jquery.js"></script>


</head>

<body class="bg-gray-100">
<!-- 侧边栏 -->
<div class="flex h-screen">
    <div class="sidebar bg-primary-dark text-primary-light w-64 p-4">
        <div class="logo mb-8">
            <h2 class="text-2xl font-bold">管理系统</h2>
        </div>
        <div class="nav-menu space-y-4">
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-shopping-cart mr-3"></i>
                <span><a href="管理员订单管理.html">订单管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-truck mr-3"></i>
                <span><a href="管理员运输管理.html">运输管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-boxes mr-3"></i>
                <span><a href="管理员库存管理.html">库存管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-warehouse mr-3"></i>
                <span><a href="管理员仓库管理.html">仓库管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-users mr-3"></i>
                <span><a href="管理员用户管理.html">用户管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-cog mr-3"></i>
                <span><a href="管理员系统设置.html">系统设置</a></span>
            </div>
        </div>
    </div>
    <!-- 主内容区域 -->
    <div class="flex-1 overflow-y-auto">
        <!-- 头部 -->
        <div class="header bg-white shadow-md p-4 flex justify-between items-center">
            <div class="search-bar relative">
                <input type="text" placeholder="搜索..."
                       class="border border-gray-300 rounded p-2 pr-10 w-64 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                <i class="fas fa-search absolute right-3 top-3 text-gray-500"></i>
            </div>
            <div class="user-info flex items-center">
                <img src="/static/img/轮播图图片04.jpg" alt="用户头像" class="rounded-full mr-2">
                <span class="font-bold">管理员</span>
            </div>
        </div>
        <!-- 管理员工具栏 -->
        <div class="admin-toolbar bg-white p-4 shadow-md flex justify-between items-center">
            <div class="quick-stats flex space-x-8">
                <div class="stat-item stat-card">
                    <i class="fas fa-warehouse mr-3"></i>
                    <div class="stat-value">5</div>
                    <div class="stat-label text-gray-500">总仓库数</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-percentage mr-3"></i>
                    <div class="stat-value">85%</div>
                    <div class="stat-label text-gray-500">平均使用率</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-tasks mr-3"></i>
                    <div class="stat-value">12</div>
                    <div class="stat-label text-gray-500">今日操作</div>
                </div>
            </div>
            <div class="action-buttons flex space-x-4">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addWarehouseModal">
                    添加仓库
                </button>
            </div>
        </div>

        <!-- 添加仓库模态框 -->
        <div class="modal fade" id="addWarehouseModal" tabindex="-1" aria-labelledby="addWarehouseModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addWarehouseModalLabel">添加仓库</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="warehouseForm">
                            <div class="mb-3">
                                <label for="warehouseNumber" class="form-label">仓库编号</label>
                                <input type="text" class="form-control" id="warehouseNumber" required>
                            </div>
                            <div class="mb-3">
                                <label for="warehouseName" class="form-label">仓库名称</label>
                                <input type="text" class="form-control" id="warehouseName" required>
                            </div>
                            <div class="mb-3">
                                <label for="warehouseAddress" class="form-label">仓库地址</label>
                                <input type="text" class="form-control" id="warehouseAddress" required>
                            </div>
                            <div class="mb-3">
                                <label for="warehouseCapacity" class="form-label">容量(立方米)</label>
                                <input type="number" class="form-control" id="warehouseCapacity" required>
                            </div>
                            <div class="mb-3">
                                <label for="warehouseManagerId" class="form-label">库管编号</label>
                                <input type="text" class="form-control" id="warehouseManagerId" required>
                            </div>
                            <div class="mb-3">
                                <label for="warehouseManagerName" class="form-label">库管名</label>
                                <input type="text" class="form-control" id="warehouseManagerName" required>
                            </div>
                            <div class="mb-3">
                                <label for="warehouseProducts" class="form-label">现存商品</label>
                                <input type="text" class="form-control" id="warehouseProducts" required>
                            </div>
                            <div class="mb-3">
                                <label for="warehouseRatio" class="form-label">使用率</label>
                                <input type="text" class="form-control" id="warehouseRatio" required>
                            </div>
                            <div class="mb-3">
                                <label for="warehouseStatus" class="form-label">状态</label>
                                <select class="form-select" id="warehouseStatus" required>
                                    <option value="">请选择</option>
                                    <option value="正常">正常</option>
                                    <option value="维护中">维护中</option>
                                    <option value="已满">已满</option>
                                    <option value="即将满仓">即将满仓</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveWarehouseBtn">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 仪表盘 -->
        <div class="dashboard p-4">
            <div class="dashboard-title flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">仓库列表</h3>
                <div class="dropdown relative">
                    <button class="btn btn-warning bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600">高级操作</button>
                    <div class="dropdown-content rounded">
                        <button type="button" class="block p-2 hover:bg-gray-200 w-full text-left" data-bs-toggle="modal" data-bs-target="#importWarehouseModal">
                            批量导入仓库
                        </button>
                        <button type="button" class="block p-2 hover:bg-gray-200 w-full text-left" data-bs-toggle="modal" data-bs-target="#dataCleanModal">
                            仓库数据清理
                        </button>
                    </div>
                </div>

            </div>
        </div>

        <!-- 批量导入仓库模态框 -->
        <div class="modal fade" id="importWarehouseModal" tabindex="-1" aria-labelledby="importWarehouseModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="importWarehouseModalLabel">批量导入仓库</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="importFile" class="form-label">选择CSV文件</label>
                            <input type="file" class="form-control" id="importFile" accept=".csv">
                        </div>
                        <div class="alert alert-info">
                            CSV格式要求：仓库编号,仓库名称,仓库地址,容量,库管编号,库管名,状态
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="importWarehousesBtn">导入</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据清理确认模态框 -->
        <div class="modal fade" id="dataCleanModal" tabindex="-1" aria-labelledby="dataCleanModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="dataCleanModalLabel">仓库数据清理</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-danger">警告：此操作将删除所有仓库数据，且不可恢复！</p>
                        <p>您确定要继续吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" id="dataCleanBtn">确认清理</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="filter-bar flex space-x-4 mb-4">
            <div class="filter-group">
                <label for="region-filter">区域</label>
                <select id="region-filter">
                    <option>全部</option>
                    <option>华北</option>
                    <option>华东</option>
                    <option>华南</option>
                </select>
            </div>
            <div class="filter-group">
                <label for="status-filter">状态</label>
                <select id="status-filter">
                    <option>全部</option>
                    <option>正常</option>
                    <option>维护中</option>
                    <option>已满</option>
                    <option>即将满仓</option>
                </select>
            </div>
            <button class="btn btn-primary-custom" onclick="filterWarehouses()">筛选</button>
            <button class="btn btn-secondary-custom" onclick="resetFilters()">重置</button>
        </div>
        <table class="warehouse-list">
            <thead>
            <tr>
                <th>仓库编号</th>
                <th>仓库名称</th>
                <th>仓库地址</th>
                <th>容量</th>
                <th>库管编号</th>
                <th>库管名</th>
                <th>现存商品</th>
                <th>使用率</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="warehouseTableBody">
            <tr>
                <td>WH001</td>
                <td>北京仓库</td>
                <td>北京市海淀区</td>
                <td>1000 立方米</td>
                <td>01</td>
                <td>张三</td>
                <td>油纸伞</td>
                <td>
                    <div class="usage-bar">
                        <div class="usage-bar-fill usage-bar-fill-normal" style="width: 78%"></div>
                    </div>
                    <span class="usage-percentage">78%</span>
                </td>
                <td><span class="warehouse-status warehouse-status-normal">正常</span></td>
                <td>
                    <button class="btn btn-sm btn-primary-custom">查看</button>
                    <button class="btn btn-sm btn-warning">编辑</button>
                    <button class="btn btn-sm btn-danger">删除</button>
                </td>
            </tr>
            <tr>
                <td>WH002</td>
                <td>上海仓库</td>
                <td>上海市浦东新区</td>
                <td>1500 立方米</td>
                <td>02</td>
                <td>李四</td>
                <td>蜀绣</td>
                <td>
                    <div class="usage-bar">
                        <div class="usage-bar-fill usage-bar-fill-warning" style="width: 92%"></div>
                    </div>
                    <span class="usage-percentage">92%</span>
                </td>
                <td><span class="warehouse-status warehouse-status-warning">即将满仓</span></td>
                <td>
                    <button class="btn btn-sm btn-primary-custom">查看</button>
                    <button class="btn btn-sm btn-warning">编辑</button>
                    <button class="btn btn-sm btn-danger">删除</button>
                </td>
            </tr>
            <tr>
                <td>WH003</td>
                <td>广州仓库</td>
                <td>广州市天河区</td>
                <td>1200 立方米</td>
                <td>03</td>
                <td>王五</td>
                <td>羌绣</td>
                <td>
                    <div class="usage-bar">
                        <div class="usage-bar-fill usage-bar-fill-normal" style="width: 65%"></div>
                    </div>
                    <span class="usage-percentage">65%</span>
                </td>
                <td><span class="warehouse-status warehouse-status-normal">正常</span></td>
                <td>
                    <button class="btn btn-sm btn-primary-custom">查看</button>
                    <button class="btn btn-sm btn-warning">编辑</button>
                    <button class="btn btn-sm btn-danger">删除</button>
                </td>
            </tr>
            </tbody>
        </table>



        <!-- 查看仓库模态框 -->
        <div class="modal fade" id="viewWarehouseModal" tabindex="-1" aria-labelledby="viewWarehouseModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="viewWarehouseModalLabel">查看仓库详情</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p><strong>仓库编号:</strong> <span id="viewWarehouseId"></span></p>
                        <p><strong>仓库名称:</strong> <span id="viewWarehouseName"></span></p>
                        <p><strong>仓库地址:</strong> <span id="viewWarehouseAddress"></span></p>
                        <p><strong>容量:</strong> <span id="viewWarehouseCapacity"></span></p>
                        <p><strong>库管编号:</strong> <span id="viewWarehouseManagerId"></span></p>
                        <p><strong>库管名:</strong> <span id="viewWarehouseManagerName"></span></p>
                        <p><strong>现存商品:</strong> <span id="viewWarehouseProducts"></span></p>
                        <p><strong>使用率:</strong> <span id="viewWarehouseRatio"></span></p>
                        <p><strong>状态:</strong> <span id="viewWarehouseStatus"></span></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑仓库模态框 -->
        <div class="modal fade" id="editWarehouseModal" tabindex="-1" aria-labelledby="editWarehouseModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editWarehouseModalLabel">编辑仓库</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="editWarehouseForm">
                            <input type="hidden" id="editWarehouseId">
                            <div class="mb-3">
                                <label for="editWarehouseName" class="form-label">仓库名称</label>
                                <input type="text" class="form-control" id="editWarehouseName" required>
                            </div>
                            <div class="mb-3">
                                <label for="editWarehouseAddress" class="form-label">仓库地址</label>
                                <input type="text" class="form-control" id="editWarehouseAddress" required>
                            </div>
                            <div class="mb-3">
                                <label for="editWarehouseCapacity" class="form-label">容量(立方米)</label>
                                <input type="number" class="form-control" id="editWarehouseCapacity" required>
                            </div>
                            <div class="mb-3">
                                <label for="editWarehouseManagerId" class="form-label">库管编号</label>
                                <input type="text" class="form-control" id="editWarehouseManagerId" required>
                            </div>
                            <div class="mb-3">
                                <label for="editWarehouseManagerName" class="form-label">库管名</label>
                                <input type="text" class="form-control" id="editWarehouseManagerName" required>
                            </div>
                            <div class="mb-3">
                                <label for="editWarehouseProducts" class="form-label">现存商品</label>
                                <input type="text" class="form-control" id="editWarehouseProducts" required>
                            </div>
                            <div class="mb-3">
                                <label for="editWarehouseRatio" class="form-label">使用率</label>
                                <input type="text" class="form-control" id="editWarehouseRatio" required>
                            </div>
                            <div class="mb-3">
                                <label for="editWarehouseStatus" class="form-label">状态</label>
                                <select class="form-select" id="editWarehouseStatus" required>
                                    <option value="正常">正常</option>
                                    <option value="维护中">维护中</option>
                                    <option value="已满">已满</option>
                                    <option value="即将满仓">即将满仓</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveEditWarehouseBtn">保存修改</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 加载指示器 -->
        <div id="loadingOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <div class="flex items-center">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mr-3"></div>
                    <span>加载中，请稍候...</span>
                </div>
            </div>
        </div>

        <!-- 成功提示 -->
        <div id="alertSuccess" class="hidden fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg z-50"></div>

        <!-- 错误提示 -->
        <div id="alertError" class="hidden fixed top-4 right-4 bg-red-500 text-white px-4 py-2 rounded shadow-lg z-50"></div>


        <div class="pagination flex justify-between items-center mt-4">
            <div>
                <span id="currentPageInfo">当前第 1 页</span>
            </div>
            <div class="flex space-x-2">
                <button onclick="prevPage()" class="btn btn-secondary-custom">上一页</button>
                <div class="flex space-x-1 pagination-buttons">
                    <!-- 动态生成页码按钮 -->
                </div>
                <button onclick="nextPage()" class="btn btn-secondary-custom">下一页</button>
            </div>
        </div>

    </div>
</div>

</body>
</html>

<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/管理员仓库管理.js"></script>